<template>

<div class="h-full  p-2 bg-yellow-50">

  <table class="table">
    <!-- head -->
    <thead>
    <tr>
      <th class="w-14">
        <label>
          <input type="checkbox" class="checkbox"/>
        </label>
      </th>
      <th>Name</th>
      <th></th>
      <th class="w-32">Status</th>
      <th></th>
    </tr>
    </thead>
    <tbody>

    <!-- row 1 -->
    <tr v-for="item in taskStore.getCompletedTaskList">
      <th>
        <label>
          <input type="checkbox" class="checkbox"/>
        </label>
      </th>
      <td>
        <div class="flex items-center gap-3">
          <div>
            <div class="font-bold">{{ item.fileName }}</div>
            <div class="text-sm opacity-50 flex gap-4">
              <span>{{ item.startTime.toLocaleString() }}</span>
              <span>{{formatSize(item.fileSize)}}</span>
            </div>
          </div>
        </div>
      </td>
      <td>
        <br/>
      </td>
      <td>已完成</td>
      <th>
        <button class="btn btn-ghost btn-sm">x</button>
      </th>
    </tr>
    <!-- row 2 -->

    </tbody>
    <!-- foot -->
    <tfoot>

    </tfoot>
  </table>

</div>
</template>

<script setup lang="ts">
import {useTaskStore} from "@/stores/task.ts";
import {formatSize,formatStatus} from "@/utils/my_function.js";

const taskStore = useTaskStore();



</script>

<style scoped>

</style>